<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="shortcut icon" href="__STATIC__/computer/css/favicon.ico" />
    <title>登录</title>
    <script type="text/javascript" src="__STATIC__/plugs/layui/layui.js"></script>
    <link rel="stylesheet" href="__STATIC__/computer/css/layui.css" />
    <link rel="stylesheet" type="text/css" href="__STATIC__/computer/css/animate.min.css" />
    <link rel="stylesheet" type="text/css" href="__STATIC__/computer/css/swiper.min.css" />
    <link rel="stylesheet" type="text/css" href="__STATIC__/computer/css/font-awesome.min.css" />
    <link rel="stylesheet" type="text/css" href="__STATIC__/computer/css/public-style.css" />
    <script type="text/javascript" src="__STATIC__/computer/js/default.js"></script>
    <!--vue-->
    <script type="text/javascript" src="__STATIC__/computer/js/jquery-3.3.1.min.js"></script>
</head>

<body>
<div id="app">

    <!--登录注册头部大图开始-->
    <div class="layui-fluid login-bg">
        <div class="layui-col-md12 layui-margin-bottom-100">
            <div class="login-tab">
                <ul class="login-tab-head">
                    <li class="user-denglu login-active">用户登录</li>
                    <li class="user-zhuce">用户注册</li>
                </ul>
                <!-- 用户登录结束 -->
                <div class="login-container" id="regist-container" style="display: block;">
                    <div class="login-container-wechat">
                        <h3>方式一：微信快速登录</h3>
                        <img src="__STATIC__/computer/img/lls12/lls1202.png" alt="二维码加载失败！">
                        <h3 class="layui-text">微信扫描二维码登录</h3>
                    </div>
                    <div class="login-container-form">
                        <h3>方式二：手机号登录</h3>
                        <form class="login-form" method="post" id="from2">
                            <div class="tel-register-item">
                                <span class="fa fa-mobile  text-color-huise" style="font-size: 42px;"></span>
                                <input type="text" name="phone" id="regist-telnum" placeholder="请输入手机号">
                            </div>
                            <div class="tel-register-item">
                                <span class="fa fa-lock text-color-huise" style="font-size: 32px;"></span>
                                <input type="password" name="password" id="regist-pas" placeholder="请输入密码">
                            </div>
                            <div class="tel-register-item">
                                <input type="checkbox" checked style="margin-right: 8px;">记住我
                                <a class="text-color-yellow forgetpass" href="">忘记密码？</a>
                            </div>
                            <button type="submit" class="regist-btn">登录</button>
                        </form>
                    </div>

                </div>
                <!-- 用户登录结束 -->
                <!-- 用户注册开始 -->
                <div class="login-container" id="login-container" style="display: none;">
                    <div class="login-container-wechat">
                        <h3>方式一：微信快速注册</h3>
                        <img :src="qrcodeurl" width="200" height="200" />
                        <h3 class="layui-text">扫描二维码>关注公众号>注册成功</h3>
                    </div>
                    <div class="login-container-form">
                        <h3>方式二：手机号注册</h3>
                        <form class="login-form" id="from">
                            <div class="tel-register-item">
                                <span class="fa fa-mobile text-color-huise" style="font-size: 42px;"></span>
                                <input type="tel" name="phone" value="" id="login-tel" placeholder="请输入手机号">
                                <span class="login-code" id="yzm" onclick="sms()">发送验证码</span>
                            </div>
                            <div class="tel-register-item">
                                <span class="fa fa-envelope text-color-huise" style="font-size: 22px;"></span>
                                <input type="text" name="clod" id="login-telnum" placeholder="请输入验证码">
                            </div>
                            <div class="tel-register-item">
                                <span class="fa fa-lock text-color-huise" style="font-size: 32px;"></span>
                                <input type="text" name="password" id="login-pas" placeholder="请设置密码">
                            </div>
                            <button class="btn regist-btn" type="submit">注册</button>
                        </form>
                    </div>
                    <div class="login-foot">
                        <span class="layui-text">*注册即代表同意</span><a class="text-color-yellow" href="">《零零诉用户注册协议》</a>
                    </div>
                </div>
                <!-- 用户注册结束 -->
            </div>
        </div>
    </div>
    <!--登录注册头部大图结束-->
    <!--侧边四个按钮开始-->
    <ul class="aside-right">
        <li>
            <i><img src="__STATIC__/computer/img/lls01/lls0115.png"></i>
            <div class="wait wait1">
                {:sysconf('youcedianhua')}
            </div>
        </li>
        <li>
            <i><img src="__STATIC__/computer/img/lls01/lls0116.png"></i>
            <div class="wait wait2">
                {:sysconf('weixinerweima')}
            </div>
        </li>
        <li>
            <a href="http://wpa.qq.com/msgrd?v=3&uin=958416459&site=qq&menu=yes">
                <i><img src="__STATIC__/computer/img/lls01/lls0117.png"></i>
            </a>
        </li>
        <!-- <li>
             <a href="">
                 <i><img src="__STATIC__/computer/img/lls01/lls0118.png"></i>
             </a>
             <div class="wait wait4">
                 呵呵
             </div>
         </li>-->
    </ul>
    <!--侧边四个按钮结束-->
    <!--选择注册会员的好处标题部分开始-->
    {volist name="ret" id="vo"}
    {if condition="$key eq 0"}
    <div class="layui-fluid layui-margin-bottom-100 layui-margin-top-100 wow bounceInLeft" data-wow-duration='1.2s'>
        <div class="layui-row">
            <div class="layui-col-md12  layui-text-center layui-one">
                <span class="layui-padding layui-boder-b text-color-black">{$vo.title}</span>
            </div>
        </div>
    </div>
    <!--选择注册会员的好处标题部分结束-->
    <!--选择注册会员的好处内容部分开始-->
    {volist name="$vo.son" id="vo2"}
    {if condition="$key eq 0"}
    <div class="layui-container wow bounceInLeft" data-wow-duration='1.2s'>
        <div class="layui-row">
            <div class="layui-col-md4">
                <img src="{$vo2.thumb}" width="100%">
            </div>
            <div class="layui-col-md8">
                <div class="layerenter-text">
                    <h1>{$vo2.title}</h1>
                    {$vo2.content}
                </div>
            </div>
        </div>
    </div>
    {/if}
    {/volist}

    {volist name="$vo.son" id="vo2"}
    {if condition="$key eq 1"}
    <div class="layerenter-bgone bg-color-gray">
        <div class="layui-container layui-margin-bottom-100 wow bounceInRight" data-wow-duration='1.2s'>
            <div class="layui-row">
                <div class="layui-col-md8">
                    <div class="layerenter-text">
                        <h1>{$vo2.title}</h1>
                        {$vo2.content}
                    </div>
                </div>
                <div class="layui-col-md4">
                    <img src="{$vo2.thumb}" width="100%">
                </div>
            </div>
        </div>
    </div>
    {/if}
    {/volist}

    {volist name="$vo.son" id="vo2"}
    {if condition="$key eq 2"}
    <div class="layerenter-bgone bg-color-white">
        <div class="layui-container layui-margin-bottom-100 wow bounceInRight" data-wow-duration='1.2s'>
            <div class="layui-row">
                <div class="layui-col-md4">
                    <img src="{$vo2.thumb}" width="100%">
                </div>
                <div class="layui-col-md8">
                    <div class="layerenter-text">
                        <h1>{$vo2.title}</h1>
                        {$vo2.content}
                    </div>
                </div>
            </div>
        </div>
    </div>
    {/if}
    {/volist}

    {volist name="$vo.son" id="vo2"}
    {if condition="$key eq 3"}
    <div class="layerenter-bgone bg-color-gray">
        <div class="layui-container wow bounceInRight" data-wow-duration='1.2s'>
            <div class="layui-row">
                <div class="layui-col-md8">
                    <div class="layerenter-text">
                        <h1>{$vo2.title}</h1>
                        {$vo2.content}
                    </div>
                </div>
                <div class="layui-col-md4">
                    <img src="{$vo2.thumb}" width="100%">
                </div>
            </div>
        </div>
    </div>
    {/if}
    {/volist}

    {/if}
    {/volist}
    <!--选择注册零零诉的好处内容部分结束-->
    <div class="layui-fluid bg-color-depgray layui-padding">
        <div class="layui-row">
            <div class="layui-col-md12 layui-text-center">
                <h6>{:sysconf('dibubeianhao')}</h6>
            </div>
        </div>
    </div>

    <!--感兴趣吗？内容部分结束-->
</div>
    <script src="__STATIC__/computer/js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="__STATIC__/computer/js/wow.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="__STATIC__/computer/js/swiper.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="__STATIC__/computer/js/public.js" type="text/javascript" charset="utf-8"></script>
    <script src="__STATIC__/computer/js/login.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript" src="__STATIC__/computer/js/vue.min.js"></script>
    <script type="text/javascript">
        var vm = new Vue({
            el : '#app',
            data:{
                qrcodeurl : '',
            },
        });

        //注册
        layui.use(['form'],function () {
            var form = layui.form;
            //二维码获取数据初始化
            GetQrCode();
            $("#from").submit(function (e) {
                e.preventDefault();
                var formzie = $(this).serialize();
                $.post("{:url('/index/login/dologin')}",formzie,function (data) {
                           if(data.code == 0){
                               layer.msg(data.msg)
                           }else{
                               layer.msg(data.msg);
                               setTimeout(function () {
                                   location.reload();
                               },2000);
                           }
                });
            });

            //获取二维码
            function GetQrCode(){
                $.getJSON("{:url('/index/publics/qrcode')}",function(ret){
                    switch(ret.code){
                        //等待扫码
                        case 0:
                            vm.qrcodeurl = ret.data.url;
                            break;
                        //已扫码
                        case 1:
                            layer.alert(ret.msg);
                            break;
                        //等待确认或取消
                        case 2:
                            break;
                        //已登录
                        case 3:
                            window.location.href=ret.data.url;
                            break;
                        //已取消
                        case 4:
                            break;
                        default:
                            vm.qrcodeurl = ret.data.url
                            break;
                    }
                });
            }

            //登录
            $("#from2").submit(function (e) {
                e.preventDefault();
                var formzie = $(this).serialize();
                $.post("{:url('/index/login/logins')}",formzie,function (data) {
                           if(data.code == 0){
                               layer.msg(data.msg);
                               setTimeout(function () {
                                   location.reload();
                               },2000);
                           }else if(data.code == 3){
                               layer.msg(data.msg);
                               setTimeout(function () {
                                   window.location.href="{:url('index/index')}";
                               },2000);
                           }else{
                               layer.msg(data.msg);
                              setTimeout(function () {
                                   location.reload();
                               },2000);
                           }
                });
            });
            form.render();
        });

     //发送验证码
        var wait=60;
        function sms() {
            var  send = document.getElementById('yzm');
            var phone = $("#login-tel").val();
            var phoneurl = /^[1][3-9][0-9]{9}/;
            var res=phoneurl.test(phone);
            if(res == false){
                layer.msg('请输入正确的手机号码');
                return;
            }
            if(wait==0){
                send.removeAttribute('disabled');
                send.innerHTML='免费发送';
                wait=60;
            }else{
                if(wait == 60){
                    $.getJSON("{:url('/index/sms/phonenull')}?phone="+phone,function(ret){
                        if(ret.code == 0){
                            layer.msg(ret.msg);
                        }
                    });
                }
                send.setAttribute('disabled',true);
                send.innerHTML='（'+wait+'）秒后';
                wait--;
                setTimeout(function () {
                    sms();
                },1000)
            }
        }
    </script>
</body>

</html>